import React, { useState, useEffect } from 'react';
import {
  Table,
  Space,
  DatePicker,
  Button,
  Select,
  Form,
  Input,
  Pagination,
  Spin,
} from 'antd';
import { Link } from 'react-router-dom';
import { history } from 'umi';
import request from '../../../http';
import './menJinDaKa.css';

const { RangePicker } = DatePicker;
const { Option } = Select;

const Check = () => {
  //表格头数据
  const columns = [
    {
      title: '日期',
      dataIndex: '日期',
      key: '日期',
    },
    {
      title: '院系',
      dataIndex: '院系',
      key: '院系',
    },
    {
      title: '专业',
      dataIndex: '专业',
      key: '专业',
    },
    {
      title: '年级',
      dataIndex: '年级',
      key: '年级',
    },
    {
      title: '班级',
      dataIndex: '班级',
      key: '班级',
    },
    {
      title: '小组',
      dataIndex: '小组',
      key: '小组',
    },
    {
      title: '项目名称',
      dataIndex: '项目名称',
      key: '项目名称',
    },
    {
      title: '实训老师',
      dataIndex: '实训老师',
      key: '实训老师',
    },
    {
      title: '责任老师',
      dataIndex: '责任老师',
      key: '责任老师',
    },
    {
      title: '学号',
      dataIndex: '学号',
      key: '学号',
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '考勤情况',
      dataIndex: '考勤情况',
      key: '考勤情况',
    },
    {
      title: '应签到',
      dataIndex: '应签到',
      key: '应签到',
    },
    {
      title: '实签到',
      dataIndex: '实签到',
      key: '实签到',
    },
    {
      title: '应签退',
      dataIndex: '应签退',
      key: '应签退',
    },
    {
      title: '实签退',
      dataIndex: '实签退',
      key: '实签退',
    },
    {
      title: '操作',
      key: '操作',
      render: (record) => {
        if (record.attendance == '请假') {
          return (
            <Space size="middle">
              <a onClick={() => LeaveReason(record.leaveInfoId)}>
                查看请假原因
              </a>
            </Space>
          );
        } else {
          return <span></span>;
        }
      },
    },
  ];

  //查看请假原因
  const LeaveReason = (leaveInfoId) => {
    history.push({
      pathname: '/teacher/attendance/LeaveInformation/index',
      query: {
        leaveInfoId: leaveInfoId,
      },
    });
  };

  //定义表格数据
  const [data, setdata] = useState([{}]);
  //判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  //接收下拉框请求
  const [College, setCollege] = useState([{}]);
  const [Major, setMajor] = useState([{}]);
  const [Grade, setGrade] = useState([{}]);
  const [Class1, setClass1] = useState([{}]);
  const [ProjectName, setProjectName] = useState([{}]);
  const [CheckInformation, setCheckInformation] = useState([{}]);

  //获取输入的值
  const [gDate, setgDate] = useState(0);
  const [gCollege, setgCollege] = useState(0);
  const [gMajor, setgMajor] = useState(0);
  const [gGrade, setgGrade] = useState(0);
  const [gClass1, setgClass1] = useState(0);
  const [gGroup, setgGroup] = useState(0);
  const [gProjectName, setgProjectName] = useState(0);
  const [gShiXunTeacher, setgShiXunTeacher] = useState(0);
  const [gStudentId, setgStudentId] = useState(0);
  const [gReaTeacher, setgReaTeacher] = useState(0);
  const [gStudentName, setgStudentName] = useState(0);
  const [gCheckInformation, setgCheckInformation] = useState(0);
  //加载
  const [loading, setloading] = useState(0);

  //周期查询
  useEffect(() => {
    //查询所有
    request
      .post('/att/teacher/queryAttendanceRecord', {
        applyDateTime: '',
        attendance: 0,
        classId: '',
        courseName: '',
        dkey: 0,
        gkey: 0,
        gradeKey: 0,
        groupName: '',
        number: 10,
        page: 1,
        responsibility: '',
        studentId: '',
        studentName: '',
        trainingTeachers: '',
      })
      .then((res) => {
        console.log('教师--考勤记录成功了', res);
        if (res.message == '数据为空') {
          alert('数据为空');
          setdata('');
          setloading(1);
        } else {
          setloading(1);
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.applyDateTime,
              院系: dataObj.dkey,
              专业: dataObj.gkey,
              年级: dataObj.gradeKey,
              班级: dataObj.classinfoId,
              小组: dataObj.groupName,
              项目名称: dataObj.courseName,
              实训老师: dataObj.trainingTeachers,
              责任老师: dataObj.responsibility,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              考勤情况: dataObj.attendance,
              应签到: dataObj.sign,
              实签到: dataObj.signed,
              应签退: dataObj.outSign,
              实签退: dataObj.outSigned,
              leaveInfoId: dataObj.leaveInfoId,
              attendance: dataObj.attendance,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        }
      });

    //院系请求
    request.post('/common/a_t_s/queryAllGrades').then((res) => {
      // console.log("院系请求成功了",res.data)
      setCollege(res.data);
    });

    //专业请求
    request.post('/common/a_t_s/queryAllMajor').then((res) => {
      // console.log("院系请求成功了",res.data)
      setMajor(res.data);
    });

    //年级请求
    request.post('/common/a_t_s/enumGrade').then((res) => {
      // console.log("年级请求成功了",res.data)
      setGrade(res.data);
    });

    //班级请求
    request.post('/common/a_t/enumClass').then((res) => {
      // console.log("班级请求成功了",res.data)
      setClass1(res.data);
    });

    //项目名称请求
    request.post('/common/a_t_s/queryCourseNames').then((res) => {
      // console.log("项目名称成功了",res.data)
      setProjectName(res.data);
    });

    //考勤情况请求
    request.post('/common/a_t_s/enumAttendance').then((res) => {
      // console.log("项目名称成功了",res.data)
      setCheckInformation(res.data);
    });
  }, []);

  //分页搜索
  function pageChange(page, pageSize) {
    if (pagination == 'false') {
      //查询所有
      request
        .post('/att/teacher/queryAttendanceRecord', {
          applyDateTime: '',
          attendance: 0,
          classId: 0,
          courseName: '',
          dkey: 0,
          gkey: 0,
          gradeKey: 0,
          groupName: '',
          number: pageSize,
          page: page,
          responsibility: '',
          studentId: '',
          studentName: '',
          trainingTeachers: '',
        })
        .then((res) => {
          // console.log("管理员--考勤记录成功了",res.data)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.applyDateTime,
              院系: dataObj.dkey,
              专业: dataObj.gkey,
              年级: dataObj.gradeKey,
              班级: dataObj.classinfoId,
              小组: dataObj.groupName,
              项目名称: dataObj.courseName,
              实训老师: dataObj.trainingTeachers,
              责任老师: dataObj.responsibility,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              考勤情况: dataObj.attendance,
              应签到: dataObj.sign,
              实签到: dataObj.signed,
              应签退: dataObj.outSign,
              实签退: dataObj.outSigned,
              attendance: dataObj.attendance,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        });
    } else if (pagination1 == 'true') {
    }
  }

  //查询搜索
  const Query = () => {
    console.log(
      gDate,
      gCollege,
      gMajor,
      gGrade,
      gClass1,
      gGroup,
      gProjectName,
      gShiXunTeacher,
      gStudentId,
      gReaTeacher,
      gStudentName,
      gCheckInformation,
    );
    request
      .post('/att/teacher/queryAttendanceRecord', {
        applyDateTime: gDate || '',
        attendance: gCheckInformation || '',
        classId: gClass1 || '',
        courseName: gProjectName || '',
        dkey: gCollege || '',
        gkey: gMajor || '',
        gradeKey: gGrade || '',
        groupName: gGroup || '',
        number: 10,
        page: 1,
        responsibility: gReaTeacher || '',
        studentId: gStudentId || '',
        studentName: gStudentName || '',
        trainingTeachers: gShiXunTeacher || '',
      })
      .then((res) => {
        console.log('教师端--查询考勤记录成功了', res.data);
        if (!(res.data == null)) {
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.applyDateTime,
              院系: dataObj.dkey,
              专业: dataObj.gkey,
              年级: dataObj.gradeKey,
              班级: dataObj.classinfoId,
              小组: dataObj.groupName,
              项目名称: dataObj.courseName,
              实训老师: dataObj.trainingTeachers,
              责任老师: dataObj.responsibility,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              考勤情况: dataObj.attendance,
              应签到: dataObj.sign,
              实签到: dataObj.signed,
              应签退: dataObj.outSign,
              实签退: dataObj.outSigned,
              attendance: dataObj.attendance,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
          setpagination('true');
          setpagination1('true');
        } else {
          alert('该查询没有数据!');
          setdata('');
          setsum('');
        }
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //重置
  const reset = () => {
    history.go(0);
    request
      .post('/att/teacher/queryAttendanceRecord', {
        applyDateTime: '',
        attendance: 0,
        classId: 0,
        courseName: '',
        dkey: 0,
        gkey: 0,
        gradeKey: 0,
        groupName: '',
        number: 10,
        page: 1,
        responsibility: '',
        studentId: '',
        studentName: '',
        trainingTeachers: '',
      })
      .then((res) => {
        // console.log("管理员--考勤记录成功了",res.data)
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.applyDateTime,
            院系: dataObj.dkey,
            专业: dataObj.gkey,
            年级: dataObj.gradeKey,
            班级: dataObj.classinfoId,
            小组: dataObj.groupName,
            项目名称: dataObj.courseName,
            实训老师: dataObj.trainingTeachers,
            责任老师: dataObj.responsibility,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            考勤情况: dataObj.attendance,
            应签到: dataObj.sign,
            实签到: dataObj.signed,
            应签退: dataObj.outSign,
            实签退: dataObj.outSigned,
            leaveInfoId: dataObj.leaveInfoId,
            attendance: dataObj.attendance,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('false');
      });
  };

  //获取日期
  const DateChange = (date, dateString) => {
    setgDate(dateString);
  };

  return (
    <div>
      <div style={{ marginTop: 20, marginLeft: 30 }}>
        <Button type="primary" style={{ padding: '5px 50px' }}>
          项目考勤管理
        </Button>
        <Link to="./menJinDaKa/menJinDaKa">
          <Button style={{ padding: '5px 50px' }}>门禁打卡记录</Button>
        </Link>
      </div>
      <div>
        <Form>
          <div className="atForm" style={{ marginTop: 30 }}>
            <span>
              日期:{' '}
              <Space direction="vertical" size={12}>
                <DatePicker onChange={DateChange} style={{ width: 200 }} />
              </Space>
            </span>
            <span style={{ marginLeft: 30 }}>
              院系:{' '}
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="请选择"
                onChange={(e, index) => {
                  setgCollege(parseInt(index.key));
                }}
              >
                {College.map((cNameObj) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </span>
            <span style={{ marginLeft: 30 }}>
              专业:{' '}
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="请选择"
                onChange={(e, index) => {
                  setgMajor(parseInt(index.key));
                }}
              >
                {Major.map((cNameObj) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </span>
            <span style={{ marginLeft: 30 }}>
              年级:{' '}
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="请选择"
                onChange={(e, index) => {
                  setgGrade(parseInt(index.key));
                }}
              >
                {Grade.map((cNameObj) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </span>
            <br />
            <br />
            <div className="second">
              <span style={{ marginLeft: -30 }}>
                班级:{' '}
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="请选择"
                  onChange={(e, index) => {
                    setgClass1(parseInt(index.key));
                  }}
                >
                  {Class1.map((cNameObj) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.format}>
                        {cNameObj.format}
                      </Option>
                    );
                  })}
                </Select>
              </span>
              <span style={{ marginLeft: 2 }}>
                项目名称:{' '}
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="请选择"
                  onChange={(e, index) => {
                    setgProjectName(parseInt(index.key));
                  }}
                >
                  {ProjectName.map((cNameObj) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.format}>
                        {cNameObj.format}
                      </Option>
                    );
                  })}
                </Select>
              </span>
              <span style={{ marginLeft: 32 }}>
                学号:{' '}
                <Input
                  placeholder="精准匹配"
                  style={{ width: 200 }}
                  onChange={(e, index) => {
                    setgStudentId(e.target.value);
                  }}
                />
              </span>
              <span style={{ marginLeft: 2 }}>
                姓名:{' '}
                <Input
                  placeholder="支持模糊查询"
                  style={{ width: 200 }}
                  onChange={(e, index) => {
                    setgStudentName(e.target.value);
                  }}
                />
              </span>
            </div>
            <br />
            <br />
            <div className="third">
              <span style={{ marginLeft: -60 }}>
                考勤情况:{' '}
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="请选择"
                  onChange={(e, index) => {
                    setgCheckInformation(parseInt(index.key));
                  }}
                >
                  {CheckInformation.map((cNameObj) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.format}>
                        {cNameObj.format}
                      </Option>
                    );
                  })}
                </Select>
              </span>
            </div>
            <Button
              type="primary"
              style={{ marginLeft: 1100, top: -45 }}
              onClick={Query}
            >
              查询
            </Button>
            <Button style={{ marginLeft: 1180, top: -78 }} onClick={reset}>
              重置
            </Button>
          </div>
          <div className="form" style={{ marginTop: -80 }}>
            {loading == 0 ? (
              <div className="example">
                <Spin size="large" />
              </div>
            ) : (
              <div>
                <Table columns={columns} dataSource={data} pagination={false} />
                <div>
                  <Pagination
                    total={sum}
                    onChange={pageChange}
                    hideOnSinglePage={true}
                  />
                </div>
              </div>
            )}
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Check;
